// tailwind.config.js
// 颜色
const colors = require('tailwindcss/colors');
const {
  isCallChain
} = require('typescript');

widthCalc = (value) => {
  // return value/(1920/100) + 'vw';
  return value + 'px';
}

const defaultColors = {
  gray: colors.trueGray,
  red: colors.rose,
  yellow: colors.amber,
  green: colors.emerald,
  blue: colors.blue,
  indigo: colors.indigo,
  purple: colors.violet,
  pink: colors.pink,
  black: colors.black,
  white: colors.white,
  'cmain': '#1a8cff',
  'cmain_hover': '#42a7ff',
  'cmain_shallow': '#00cc9d',
  'cmain_deep': '#009875',
  'caux': '#48a3ff',
  'calt': '#ff6c00',
  'cwarn': '#fe5900',
  'c3': '#333333',
  'c6': '#666666',
  'c8': '#888888',
  'c9': '#999999',
  'cb': '#bbbbbb',
  'cc': '#cccccc',
  'cd': '#dddddd',
  'ce': '#eeeeee',
  'ce2': '#e2e2e2',
  'ce6': '#e6e6e6',
  'ce8': '#e8e8e8',
  'cf2': '#f2f2f2',
  'cf6': '#f6f6f6',
  'cf8': '#f8f8f8',
  'cfa': '#fafafa',
  'cbg': '#f4f6f9',
  'cblue1': '#39bfc0',
  'cgreen1': '#3ccc75',
  'cgreen1': '#3ccc75',
  'cgreen1': '#3ccc75',
  'cgreen2': '#b0d12a',
  'cpurple1': '#e371fe',
  'cred1': '#ff5959',

  //Dark
  'dark_selecthover': '#2C354B',
}

// 缩放比例
const defaultScale = {
  '0': '0',
  '25': '.25',
  '50': '.5',
  '75': '.75',
  '90': '.9',
  '95': '.95',
  '100': '1',
  '105': '1.05',
  '110': '1.1',
  '125': '1.25',
  '150': '1.5',
  '200': '2',
  '400': '4',
}

// 动画
const keyframes = {
  // 首页图标旋转抖动
  homerotates: {
    '0%': {
      transform: 'rotate(0deg)'
    },
    '20%': {
      transform: 'rotate(45deg)'
    },
    '40%': {
      transform: 'rotate(-45deg)'
    },
    '60%': {
      transform: 'rotate(20deg)'
    },
    '80%': {
      transform: 'rotate(-20deg)'
    },
    '100%': {
      transform: 'rotate(0deg)'
    },
  },
  // 光标闪烁
  twinkle: {
    '0%': {
      background: 'white'
    },
    '50%': {
      background: 'white'
    },
    '51%': {
      background: '#00B38A'
    },
    '100%': {
      background: '#00B38A'
    },
  },
  // 霍兰德按钮动画
  evaluation_huolande: {
    '0%': {
      width: '0px',
      height: '0px'
    },
    '100%': {
      width: '162px',
      height: '162px'
    },
  },
  // MBTI测试按钮动画
  evaluation_mbti: {
    '0%': {
      width: '12px',
      height: '10.5vh'
    },
    '100%': {
      width: '100%',
      height: '10.5vh'
    },
  },
  // 职业锚测试按钮动画
  evaluation_job: {
    '0%': {
      width: '48px',
      height: '48px'
    },
    '100%': {
      width: '100%',
      height: '48px'
    },
  },
  evaluation_job_favourite_on: {
    '0%': {
      width: '40px',
      height: '40px'
    },
    '100%': {
      width: '100%',
      height: '40px'
    },
  },
  evaluation_job_favourite_off: {
    '0%': {
      width: '100%',
      height: '40px'
    },
    '100%': {
      width: '40px',
      height: '40px'
    },
  },
};
const animation = {
  homerotates: 'homerotates 1s ease-in-out',
  twinkle: 'twinkle 1s infinite',
  evaluation_huolande: 'evaluation_huolande 1s ease-in-out',
  evaluation_mbti: 'evaluation_mbti 1s ease-in-out',
  evaluation_job: 'evaluation_job 1s ease-in-out',
  evaluation_job_favourite_on: 'evaluation_job_favourite_on 1s ease-in-out',
  evaluation_job_favourite_off: 'evaluation_job_favourite_off 1s ease-in-out',
};

// 字体
const fontSize = { // x/(1920/100) = 16/19.2 = 0.83
  'f12': widthCalc(12),
  'f13': widthCalc(13),
  'f14': widthCalc(14),
  'f15': widthCalc(15),
  'f16': widthCalc(16),
  'f17': widthCalc(17),
  'f18': widthCalc(18),
  'f19': widthCalc(19),
  'f20': widthCalc(20),
  'f21': widthCalc(21),
  'f22': widthCalc(22),
  'f23': widthCalc(23),
  'f24': widthCalc(24),
  'f26': widthCalc(26),
  'f30': widthCalc(30),
  'f32': widthCalc(32),
  'f36': widthCalc(36),
  'f40': widthCalc(40),
  'f42': widthCalc(42),
  'f54': widthCalc(54),
}

// 阴影 x,y,模糊距离,阴影大小,颜色
const boxShadow = {
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
  DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
  md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
  lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
  '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
  '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
  inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
  outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
  focus: '0 0 0 3px rgba(66, 153, 225, 0.5)',
  none: 'none',
  sy: '7px 7px 10px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
  card: '0px 0px 10px 3px rgba(0, 0, 0, 0.3)',
  card2: '0px 0px 10px 3px rgba(0, 0, 0, 0.2)',
};

const width = {
  'w1/2':' 50%',
  'w1/3':' 33.333333%',
  'w2/3':' 66.666667%',
  'w1/4':' 25%',
  'w2/4':' 50%',
  'w3/4':' 75%',
  'w1/5':' 20%',
  'w2/5':' 40%',
  'w3/5':' 60%',
  'w4/5':' 80%',
  'w1/6':' 16.666667%',
  'w2/6':' 33.333333%',
  'w3/6':' 50%',
  'w4/6':' 66.666667%',
  'w5/6':' 83.333333%',
  'w1/12':' 8.333333%',
  'w2/12':' 16.666667%',
  'w3/12':' 25%',
  'w4/12':' 33.333333%',
  'w5/12':' 41.666667%',
  'w6/12':' 50%',
  'w7/12':' 58.333333%',
  'w8/12':' 66.666667%',
  'w9/12':' 75%',
  'w10/12':' 83.333333%',
  'w11/12':' 91.666667%',
  'wfull':' 100%',
  'w0':widthCalc(0),
  'w1':widthCalc(1),
  'w1.5':widthCalc(1.5),
  'w2':widthCalc(2),
  'w2.5':widthCalc(2.5),
  'w3':widthCalc(3),
  'w3.5':widthCalc(3.5),
  'w4':widthCalc(4),
  'w4.5':widthCalc(4.5),
  'w5':widthCalc(5),
  'w5.5':widthCalc(5.5),
  'w6':widthCalc(6),
  'w7':widthCalc(7),
  'w8':widthCalc(8),
  'w9':widthCalc(9),
  'w10':widthCalc(10),
  'w11':widthCalc(11),
  'w12':widthCalc(12),
  'w13':widthCalc(13),
  'w14':widthCalc(14),
  'w15':widthCalc(15),
  'w16':widthCalc(16),
  'w17':widthCalc(17),
  'w18':widthCalc(18),
  'w19':widthCalc(19),
  'w20':widthCalc(20),
  'w22':widthCalc(22),
  'w24':widthCalc(24),
  'w26':widthCalc(26),
  'w27':widthCalc(27),
  'w28':widthCalc(28),
  'w30':widthCalc(30),
  'w32':widthCalc(32),
  'w34':widthCalc(34),
  'w36':widthCalc(36),
  'w38':widthCalc(38),
  'w40':widthCalc(40),
  'w44':widthCalc(44),
  'w48':widthCalc(48),
  'w50':widthCalc(50),
  'w52':widthCalc(52),
  'w56':widthCalc(56),
  'w58':widthCalc(58),
  'w60':widthCalc(60),
  'w64':widthCalc(64),
  'w68':widthCalc(68),
  'w70':widthCalc(70),
  'w72':widthCalc(72),
  'w76':widthCalc(76),
  'w80':widthCalc(80),
  'w84':widthCalc(84),
  'w88':widthCalc(88),
  'w90':widthCalc(90),
  'w92':widthCalc(92),
  'w96':widthCalc(96),
  'w100':widthCalc(100),
  'w104':widthCalc(104),
  'w108':widthCalc(108),
  'w102':widthCalc(102),
  'w106':widthCalc(106),
  'w110':widthCalc(110),
  'w120':widthCalc(120),
  'w126':widthCalc(126),
  'w130':widthCalc(130),
  'w140':widthCalc(140),
  'w150':widthCalc(150),
  'w160':widthCalc(160),
  'w170':widthCalc(170),
  'w180':widthCalc(180),
  'w190':widthCalc(190),
  'w200':widthCalc(200),
  'w201':widthCalc(201),
  'w210':widthCalc(210),
  'w220':widthCalc(220),
  'w230':widthCalc(230),
  'w240':widthCalc(240),
  'w252':widthCalc(252),
  'w260':widthCalc(260),
  'w270':widthCalc(270),
  'w280':widthCalc(280),
  'w300':widthCalc(300),
  'w310':widthCalc(310),
  'w320':widthCalc(320),
  'w330':widthCalc(330),
  'w360':widthCalc(360),
  'w390':widthCalc(390),
  'w400':widthCalc(400),
  'w420':widthCalc(420),
  'w446':widthCalc(446),
  'w500':widthCalc(500),
  'w520':widthCalc(520),
  'w550':widthCalc(550),
  'w580':widthCalc(580),
  'w600':widthCalc(600),
  'w635':widthCalc(635),
  'w650':widthCalc(650),
  'w680':widthCalc(680),
  'w685':widthCalc(685),
  'w700':widthCalc(700),
  'w750':widthCalc(750),
  'w800':widthCalc(800),
  'w850':widthCalc(850),
  'w1030':widthCalc(1030),
  'w1150':widthCalc(1150),
  'w1200':widthCalc(1200),
  'w1350':widthCalc(1350),
}

module.exports = {
  purge: {
    content: ['./public/**/*.html', './src/**/*.vue']
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      keyframes: keyframes,
      animation: animation,
      spacing: width,
      lineHeight: width,
      minWidth: width,
      minHeight: width,
      zIndex: {
        '-10': '-10',
      },
    },
    colors: defaultColors,
    fontFamily: {
      'sans': ['sy', 'Helvetica', 'Arial', 'sans-serif'],
      'sym': ['sy-medium'],
      'syl': ['sy-light'],
      'syb': ['sy-bold'],
    },
    textColor: defaultColors,
    fontSize: fontSize,
    boxShadow: boxShadow,
    scale: defaultScale,
    transitionProperty: {
      'height': 'height',
      'width': 'width',
      'spacing': 'margin, padding',
    }
    // spacing: width,
  },
  variants: {
    extend: {
      scale: ['group-hover'],
      rotate: ['group-hover'],
      animation: ['group-hover'],
      translate: ['group-hover'],
      ringColor: ['focus'],
    },
  },
  plugins: [],
};